<template>
  <div>
    <!-- <div style="height: 100%;">
			<Table :columns="columns1" border show-context-menu :data="list" id="table" size="small">
				<template slot="contextMenu">
					<DropdownItem @click.native>下载</DropdownItem>
					<DropdownItem @click.native>复制</DropdownItem>
					<DropdownItem @click.native>移动</DropdownItem>
					<DropdownItem @click.native="handleContextMenuRename">重命名</DropdownItem>
					<DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">删除</DropdownItem>
				</template>
			</Table>
    </div>-->
    <div style="width: 100%;height: 6vh;">
      <div style="display: flex;justify-content:space-between;  border-top: 2px solid #f2f2f2;">
        <Row
          type="flex"
          justify="start"
          class="code-row-bg"
          style="float: left;padding-right: 5px; height: 40px;line-height: 60px;"
        >
          <div style="float:left; margin-left:10px; line-height: 40px;">
            <Button size="small" icon="ios-cloud-upload">上传</Button>
            <Button size="small" icon="ios-add-circle" @click="NewFolder = true">新建</Button>
            <Modal title="新建文件夹" v-model="NewFolder" @on-ok="YesFolder" @on-cancel="Nofolder">
              <Input v-model="FolderValue" placeholder="请输入新建文件夹的名称……" style="width: 100%;" />
            </Modal>
          </div>
          <div style="margin-left:5px; line-height: 40px;">
            <ButtonGroup>
              <Button size="small" v-show="button" icon="md-trash" @click="Deletes">删除</Button>
              <Button size="small" v-show="button" icon="md-cloud-download">下载</Button>
              <Button size="small" v-show="button" icon="ios-copy">复制到</Button>
              <Button size="small" v-show="button" icon="ios-albums">移动到</Button>
            </ButtonGroup>
          </div>
        </Row>

        <div style="display: flex;align-items: center;">
          <div style="height: 40px;">
            <i-switch
              size="small"
              v-model="switch1"
              @on-change="change"
              style="margin-top: 12px;float: right;margin-right: 10px;"
            />
            <Input
              v-model="SearchValue"
              suffix="ios-search"
              size="small"
              placeholder="搜索"
              style="margin-top: 7px; width: auto; float: right; margin-right: 10px;"
              @on-change="sousuo"
            />
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 78vh;overflow:auto;">
      <Table :columns="columns1" :data="list" v-if="!switch1" @on-selection-change="select"></Table>
    </div>
    <!-- <ul v-for="item in list">
			<h1>{{item.server_filename}}</h1>
    </ul>-->
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      list: [], //文件列表
      button: false, //多选显示按钮
      value: "", //新建文件夹的value
      switch1: false, //切换缩略图
      SearchValue: "", //搜索文件value
      Selection: [], //多选按钮事件
      NewFolder: false, //新建文件夹弹窗
      FolderValue: "", //新建文件夹value
      columns1: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "文件名",
          key: "server_filename"
        }
      ]
    };
  },
  mounted() {
    window.sessionStorage.setItem("Baidu_path", "");
    this.Refresh();
  },
  methods: {
    //刷新文件列表
    Refresh() {
     var access_token = window.sessionStorage.getItem('access_token')
			axios({
				url: 'https://pan.baidu.com/rest/2.0/xpan/multimedia?method=categorylist&access_token=' + access_token +'&category=7',
				method: 'get'
			}).then((res) => {
				console.log(res.data)
				this.list = res.data.list
		})
    },
    //批量操作
    select(Selection) {
      //对选中的数据 显示按钮，执行操作

      //将选中的数据，存储到数组里面，以便使用
      this.Selection = Selection;

      if (Selection.length != 0) {
        this.button = true;
      } else {
        this.button = false;
      }

      console.log(Selection);
    },
    //缩略图切换
    change(status) {
      this.$Message.info("开关状态：" + status);
    },
    //搜索文件
    sousuo() {
      var access_token = window.sessionStorage.getItem("access_token");
      if (this.SearchValue != "") {
        const name = this.SearchValue;
        axios({
          url:
            "https://pan.baidu.com/rest/2.0/xpan/file?method=search&access_token=" +
            access_token +
            "&key=" +
            name,
          method: "get"
        }).then(res => {
          console.log(res.data.list);
          this.list = res.data.list;
        });
      } else {
        this.Refresh();
      }
	},
	//确定新建文件夹
    YesFolder() {
      var value = this.FolderValue;
      var access_token = window.sessionStorage.getItem("access_token");
      var path = window.sessionStorage.getItem("Baidu_path");
      if (path == "/") {
        path = "";
      }
      path = path + "/" + value;
      axios({
        url:
          "https://pan.baidu.com/rest/2.0/xpan/file?method=create&access_token=" +
          access_token,
        method: "post",
        data: qs.stringify({
          path: path,
          isdir: 1
        })
      }).then(res => {
        this.$Message.success("新建文件夹：" + value );
        this.Refresh();
      });
	},
	//取消新建文件夹
    Nofolder() {
      this.$Message.warning("已取消新建文件夹！");
	},
	Deletes() {
				this.$Modal.confirm({
					title: 'Title',
					content: '<p>Content of dialog</p><p>Content of dialog</p>',
					onOk: () => {
						console.log(this.Selection)
						var Selection = this.Selection
						for (var i = 0; i < Selection.length; i++) {
							var access_token = window.sessionStorage.getItem('access_token')
							axios({
								url: 'https://pan.baidu.com/rest/2.0/xpan/file?method=filemanager&access_token=' + access_token +
									'&opera=delete',
								method: 'post',
								// data: {
								// 	async: '1',
								// },
								data: qs.stringify({
									async: '1',
									filelist: '["' + Selection[i].path + '"]'
								}),
							}).then((res) => {
								console.log(res)
								this.Refresh()
								this.button = false
							})
							
						}
						this.$Message.info('Clicked ok');
					},
					onCancel: () => {
						this.$Message.info('Clicked cancel');
					}
				});
			},
  }
};
</script>

